<template>
	<view class="content">
		<image src="../../static/images/home/home-top-bg.png" mode="widthFix" style="width: 100%;position: absolute;">
		</image>
		<view class="info-block">
			<view class="top-block">
				<view class="city-item" @click="navigate('/pages/select_address/select_address')">
					<view class="city">{{info.city}}</view>
					<view class="iconfont icon-a-icon_xialaxuanze1"></view>
				</view>
				<view class="search-item">
					<view class="iconfont icon-sousuo"></view>
					<input placeholder="请输入关键字" class="search" placeholder-style="font-size:28rpx;"/>
				</view>
			</view>
			<view class="swiper-block">
				<swiper autoplay="true" indicator-dots="true" indicator-color="#999" indicator-active-color="#fff"
					class="swiper-item">
					<swiper-item :item-id="item.id" v-for="(item,index) in swiperList" :key="item.id" class="bg-item">
						<image :src="item.imgUrl" class="bg-img"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="menu-block">
				<view class="menu-item" @click="switchTo('/pages/notice/notice')">
					<image class="menu-icon" src="../../static/images/home/notice.png"></image>
					<view class="title">通知公告</view>
				</view>
				<view class="menu-item" @click="switchTo('/pages/application/application')">
					<image class="menu-icon" src="../../static/images/home/application.png"></image>
					<view class="title">我要报名</view>
				</view>
				<view class="menu-item">
					<image class="menu-icon" src="../../static/images/home/query.png"></image>
					<view class="title">我要查询</view>
				</view>
			</view>
			<view class="notice-block">
				<view class="title-item">
					<view class="line"></view>
					<view class="title">通知公告</view>
				</view>
				<template v-if="info.id==1">
					<view class="notice-item" v-for="(item,index) in noticeList" :key="item.id"
						style="background: #fff url('../../static/images/home/notice-bg.png') no-repeat right;background-size: 30% 100%;"
						@click="navigate('/pages/notice/notice-detail?id='+item.id)">
						<view class="notice-title">{{item.title}}</view>
						<view class="time">发布日期：{{item.time}}</view>
					</view>
				</template>
				<template v-if="info.id==2">
					<view class="notice-item" v-for="(item,index) in noticeList2" :key="item.id"
						style="background: #fff url('../../static/images/home/notice-bg.png') no-repeat right;background-size: 30% 100%;"
						@click="navigate('/pages/notice/notice-detail?id='+item.id)">
						<view class="notice-title">{{item.title}}</view>
						<view class="time">发布日期：{{item.time}}</view>
					</view>
				</template>
				<template v-if="info.id==3">
					<view class="notice-item" v-for="(item,index) in noticeList3" :key="item.id"
						style="background: #fff url('../../static/images/home/notice-bg.png') no-repeat right;background-size: 30% 100%;"
						@click="navigate('/pages/notice/notice-detail?id='+item.id)">
						<view class="notice-title">{{item.title}}</view>
						<view class="time">发布日期：{{item.time}}</view>
					</view>
				</template>
				<template v-if="info.id==4">
					<view class="notice-item" v-for="(item,index) in noticeList4" :key="item.id"
						style="background: #fff url('../../static/images/home/notice-bg.png') no-repeat right;background-size: 30% 100%;"
						@click="navigate('/pages/notice/notice-detail?id='+item.id)">
						<view class="notice-title">{{item.title}}</view>
						<view class="time">发布日期：{{item.time}}</view>
					</view>
				</template>
				<template v-if="info.id==5">
					<view class="notice-item" v-for="(item,index) in noticeList5" :key="item.id"
						style="background: #fff url('../../static/images/home/notice-bg.png') no-repeat right;background-size: 30% 100%;"
						@click="navigate('/pages/notice/notice-detail?id='+item.id)">
						<view class="notice-title">{{item.title}}</view>
						<view class="time">发布日期：{{item.time}}</view>
					</view>
				</template>
				<template v-if="info.id==6">
					<view class="notice-item" v-for="(item,index) in noticeList6" :key="item.id"
						style="background: #fff url('../../static/images/home/notice-bg.png') no-repeat right;background-size: 30% 100%;"
						@click="navigate('/pages/notice/notice-detail?id='+item.id)">
						<view class="notice-title">{{item.title}}</view>
						<view class="time">发布日期：{{item.time}}</view>
					</view>
				</template>
				<template v-if="info.id==7">
					<view class="notice-item" v-for="(item,index) in noticeList7" :key="item.id"
						style="background: #fff url('../../static/images/home/notice-bg.png') no-repeat right;background-size: 30% 100%;"
						@click="navigate('/pages/notice/notice-detail?id='+item.id)">
						<view class="notice-title">{{item.title}}</view>
						<view class="time">发布日期：{{item.time}}</view>
					</view>
				</template>
				<template v-if="info.id==8">
					<view class="notice-item" v-for="(item,index) in noticeList8" :key="item.id"
						style="background: #fff url('../../static/images/home/notice-bg.png') no-repeat right;background-size: 30% 100%;"
						@click="navigate('/pages/notice/notice-detail?id='+item.id)">
						<view class="notice-title">{{item.title}}</view>
						<view class="time">发布日期：{{item.time}}</view>
					</view>
				</template>
			</view>
			<view class="notice-block">
				<view class="title-item">
					<view class="line"></view>
					<view class="title">考试报名</view>
				</view>
				<view class="examination-item" v-for="(item,index) in examinationList" :key="item.id">
					<view class="examination-title">
						<view class="name">{{item.title}}</view>
						<view class="application">已截至</view>
					</view>
					<view class="label-item">
						<view class="iconfont icon-dizhi" style="font-size: 40rpx;margin-left: -4rpx;"></view>
						<view class="label">{{item.address}}</view>
					</view>
					<view class="label-item">
						<view class="iconfont icon-shijian"></view>
						<view class="label">{{item.starTime}}至{{item.endTime}}</view>
					</view>
					<view class="label-item">
						<view class="iconfont icon-daojishi"></view>
						<view class="label">{{item.upTime}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCustomNavData
	} from '@/util/util.js'
	export default {
		data() {
			return {
				info: {
					id: 1,
					city: '酒泉市',
				},
				swiperList: [{
					id: 1,
					imgUrl: '../../static/images/home/banner.jpg'
				}],
				// none: false,
				noticeList: [{
						id: 1,
						title: '2020年酒泉市市直事业单位公开招聘工作人员考试',
						time: '2020-06-11 09:00'
					},
					{
						id: 2,
						title: '2020年肃州区事业单位公开招聘工作人员考试',
						time: '2020-10-09 14:30:59'
					},
					{
						id: 3,
						title: '肃州区公开考试招聘专职社区工作者报名',
						time: '2020-10-09 14:30:59'
					},
					{
						id: 4,
						title: '2020年肃北县事业单位公开招聘工作人员考试',
						time: '2020-08-14 17:30:59'
					},
					{
						id: 5,
						title: '2020年玉门市事业单位公开招聘工作人员考试',
						time: '2020-08-10 15:30:59'
					},
					{
						id: 6,
						title: '金塔县公开招聘专职社区工作者考试报名',
						time: '2020-09-11 15:30:59'
					},
					{
						id: 7,
						title: '2020年酒泉市瓜州县事业单位公开招聘工作人员考试',
						time: '2020-10-21 15:33:59'
					},
					{
						id: 8,
						title: '2020年敦煌市事业单位公开招聘工作人员考试',
						time: '2020-09-16 15:33:59'
					},
					{
						id: 9,
						title: '2020年阿克塞县事业单位公开招聘工作人员考试',
						time: '2020-08-05 15:33:59'
					},
				],
				noticeList2:[
					{
						id: 2,
						title: '2020年肃州区事业单位公开招聘工作人员考试',
						time: '2020-10-09 14:30:59'
					},
					{
						id: 3,
						title: '肃州区公开考试招聘专职社区工作者报名',
						time: '2020-10-09 14:30:59'
					},
				],
				noticeList3:[
					{
						id: 5,
						title: '2020年玉门市事业单位公开招聘工作人员考试',
						time: '2020-08-10 15:30:59'
					},
				],
				noticeList4:[
					{
						id: 7,
						title: '2020年酒泉市瓜州县事业单位公开招聘工作人员考试',
						time: '2020-10-21 15:33:59'
					},
				],
				noticeList5:[
					{
						id: 8,
						title: '2020年敦煌市事业单位公开招聘工作人员考试',
						time: '2020-09-16 15:33:59'
					},
				],
				noticeList6:[
					{
						id: 4,
						title: '2020年肃北县事业单位公开招聘工作人员考试',
						time: '2020-08-14 17:30:59'
					},
				],
				noticeList7:[
					{
						id: 9,
						title: '2020年阿克塞县事业单位公开招聘工作人员考试',
						time: '2020-08-05 15:33:59'
					},
				],
				noticeList8:[
					{
						id: 6,
						title: '金塔县公开招聘专职社区工作者考试报名',
						time: '2020-09-11 15:30:59'
					},
				],
				// noticeList8:[
				// 	{
				// 		id: 4,
				// 		title: '2020年肃北县事业单位公开招聘工作人员考试',
				// 		time: '2020-08-14 17:30:59'
				// 	},
				// ],
				examinationList: [{
						id: 1,
						title: '酒泉市事业单位公开招聘工作人员',
						address: '酒泉职业技术学院',
						starTime: '2020-06-12 09:00',
						endTime: '2020-06-19 17:00',
						upTime: '已截至'
					},
					{
						id: 2,
						title: '酒泉市事业单位公开招聘工作人员',
						address: '酒泉卫校',
						starTime: '2021-01-15 8:30',
						endTime: '2021-01-18 17:00',
						upTime: '已截至'
					}
				]
			}
		},

		onLoad(e) {
			console.log(e)
			this.info.city = e.value ? e.value : '酒泉市'
			this.info.id = e.id ? e.id : 1
		},
		methods: {
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			switchTo(url) {
				uni.switchTab({
					url
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		min-height: 100vh;
		position: relative;
		padding-bottom: 30rpx;

		.info-block {
			display: flex;
			flex-direction: column;
			position: relative;
			padding: 30rpx;

			.top-block {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				.city-item {
					display: flex;
					flex-direction: row;
					align-items: center;

					.city {
						color: #fff;
						margin-right: 10rpx;
						font-size: 36rpx;
					}

					.iconfont {
						color: #fff;
					}
				}

				.search-item {
					width: calc(100% - 200rpx);
					display: flex;
					flex-direction: row;
					align-items: center;
					background: #fff;
					border-radius: 40rpx;
					padding: 0 10rpx;
					height: 70rpx;

					.iconfont {
						color: #2287FC;
						margin: 0 6rpx;
						font-weight: bold;
						font-size: 40rpx;
					}

					input {
						flex-grow: 1;
						font-size: 28rpx;
						color: #fff;
						margin: 0 10rpx;
					}
				}
			}

			.swiper-block {
				height: 320rpx;
				width: 100%;
				margin-top: 40rpx;

				.swiper-item {
					width: 100%;
					height: 320rpx;

					.bg-item {
						width: 100%;
						height: 100%;

						.bg-img {
							width: 100%;
							height: 100%;
							border-radius: 20rpx;
						}
					}
				}
			}

			.menu-block {
				padding: 30rpx;
				display: flex;
				flex-direction: row;
				width: calc(100% - 60rpx) / 3;
				background-color: #fff;
				box-shadow: 0 0 18rpx 0 #dddddd;
				margin-top: 40rpx;
				border-radius: 20rpx;

				.menu-item {
					width: 100%;
					margin-right: 30rpx;
					display: flex;
					flex-direction: column;
					align-items: center;

					.menu-icon {
						width: 80rpx;
						height: 80rpx;
						margin-bottom: 30rpx;
					}

					.title {
						font-size: 30rpx;
					}
				}

				.menu-item:last-child {
					margin-right: 0;
				}
			}

			.notice-block {
				display: flex;
				flex-direction: column;
				margin-top: 40rpx;

				.title-item {
					display: flex;
					flex-direction: row;
					align-items: center;

					.line {
						width: 8rpx;
						height: 34rpx;
						background-color: #2287FC;
						border-radius: 20rpx;
						margin-right: 10rpx;
					}

					.title {
						font-size: 36rpx;
						font-weight: bold;
					}
				}

				.notice-item {
					margin-top: 30rpx;
					height: 200rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 30rpx;
					border-radius: 20rpx;
					box-shadow: 0 0 18rpx 0 #dddddd;

					.notice-title {
						font-size: 30rpx;
					}

					.time {
						font-size: 28rpx;
						color: #999;
					}
				}

				.examination-item {
					background: #fff;
					margin-top: 30rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 30rpx;
					border-radius: 20rpx;
					box-shadow: 0 0 18rpx 0 #dddddd;

					.examination-title {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						border-bottom: 1px solid #eee;
						padding-bottom: 30rpx;

						.name {
							font-size: 30rpx;
							font-weight: bold;
							width: calc(100% - 160rpx);
						}

						.application {
							background-color: #69A6F6;
							color: #fff;
							border-radius: 60rpx;
							padding: 10rpx 14rpx;
							font-size: 30rpx;
						}
					}

					.label-item {
						display: flex;
						flex-direction: row;
						align-items: center;
						padding-top: 30rpx;

						.iconfont {
							color: #2287FC;
							font-size: 30rpx;
							font-weight: bold;
						}

						.label {
							font-size: 28rpx;
							margin-left: 14rpx;
						}
					}
				}
			}
		}
	}
</style>